(function () {
    //自定义弹框
    class CblChat extends HTMLElement {
        constructor() {
            super();
            this.domain = 'http://43.138.133.11:3003';//服务端地址端口
            this.clientDomain = 'http://43.138.133.11:3003';//用户端地址端口
            this.data = {
                serviceImg: `${this.domain}/images/service.jpeg`,
                serviceCss: `${this.domain}/stylesheets/chat.css`,
                clientUrl: `${this.clientDomain}/customer?siteToken=[siteToken]`
            };
            this.attachShadow({mode: 'open'});
            this.initElement();
        }

        //初始化元素
        initElement() {
            const dialogBox = document.createElement('div');
            dialogBox.className = 'dialog-box';
            const box = document.createElement('div');
            box.className = 'box';
            const img = new Image();
            img.src = this.data.serviceImg;
            box.appendChild(img);
            const close = document.createElement('div');
            close.className = 'close';
            close.addEventListener('click', function () {
                dialogBox.classList.remove('show');
            });
            const title = document.createElement('div');
            title.className = 'title';
            title.innerText = '欢迎来到本网站，请问有什么可以帮您？';
            const btn = document.createElement('button');
            btn.className = 'btn';
            btn.innerText = '在线咨询';
            btn.addEventListener('click', () => {
                window.open(this.data.clientUrl, 'chat', 'width=800,height=500');
                dialogBox.classList.remove('show');
            });
            box.appendChild(close);
            box.appendChild(title);
            box.appendChild(btn);
            dialogBox.appendChild(box);
            this.shadowRoot.appendChild(dialogBox);
            const link = document.createElement('link');
            link.href = this.data.serviceCss;
            link.rel = 'stylesheet';
            link.type = 'text/css';
            this.shadowRoot.appendChild(link);
            let timeout = setTimeout(() => {
                dialogBox.classList.add('show');
            }, 10000);

            const chatLogo = new Image();
            chatLogo.src = this.data.serviceImg;
            chatLogo.classList = 'chat-logo';
            chatLogo.addEventListener('click', () => {
                if (timeout) {
                    clearTimeout(timeout);
                    timeout = null;
                }
                window.open(this.data.clientUrl, 'chat', 'width=800,height=500');
            });
            this.shadowRoot.appendChild(chatLogo);
        }
    }

    customElements.define('cbl-chat', CblChat);
    const cblChat = document.createElement('cbl-chat');
    document.body.appendChild(cblChat);
}());